<template>
  <div class="user-wrapper user-bind-phone">
    <div class="user-title">
      <van-button
        class="btn-back"
        icon="arrow-left"
        :to="{ name: 'user-account' }" />
      {{ $t('User.mobile_binding') }}
    </div>
    <img src="../../assets/images/bind-phone@2x.png" class="bind-phone-img">
    <p class="current-phone">{{ $t('User.your_phone') }}
      <span class="current-phone-number">{{ currentPhoneNumber }}</span>
    </p>
    <p class="phone-tip">{{ $t('User.current_login') }}</p>
    <van-button
      class="block-btn"
      :to="{ name: 'change-phone' }"
      block>{{ $t('User.change_phone') }}</van-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPhoneNumber: '',
    };
  },
  methods: {

  }
};
</script>

<style lang="less" scoped>
  .user-bind-phone{
    background: #fff;
    text-align: center;
    font-family: 'PingFang-SC-Regular';
  }
  .bind-phone-img{
    display: block;
    margin: 100px auto 60px;
    width: 160px;
  }
  .current-phone{
    line-height: 70px;
    font-size: 26px;
    color: #666;
  }
  .current-phone-number{
    font-size:34px;
    font-weight:bold;
    vertical-align: bottom;
    color: #444;
  }
  .phone-tip{
    font-size: @font-size-sm;
    color: #999;
  }
  .block-btn{
    margin: 50px auto;
    width: 570px;
  }
</style>
